<template>
  <div style="background-color: #fff; min-height: 100vh">
    <homeHead class="line"   :showLeft="true" :name="'在线提问'"></homeHead>
    <div class="viewport">
      <div class="title">
        <div class="title1">
          {{ routeParams.Title }}
        </div>
        <div v-html="strTranslate(routeParams.Content)" class="content"></div>
        <div class="infoP">
          <div class="info">
            <span class="iconfont">&#xe604;</span>
            <span class="name">{{ routeParams.UserName }}</span>
            <span class="time">{{ routeParams.CreateTime }}</span>
          </div>
        </div>
      </div>
      <div class="comment">
        <div class="askCount">
          <span class="name">回答数:</span>
          <span class="content">
            {{ commentData.length }}
          </span>
        </div>
        <div class="bestQuestion">
          <span class="iconfont">&#xe655;</span>
          <span class="name">最佳答案:</span>
        </div>

        <!-- 评论数据 -->
        <template v-if="commentData.length">
          <div
            class="askContent"
            v-for="(item, index) in commentData"
            :key="item.Id"
          >
            <div class="info">
              <span class="iconfont">&#xe604;</span>
              <span class="name">{{
                item.RealName || routeParams.RealName
              }}</span>
              <span class="time">{{ item.CreateTime }}</span>
              <span @click="replyShow(item)" class="replyBut">
                <span class="iconfont">&#xe608;</span>
                <span class="name">回复</span>
              </span>
            </div>
            <div
              v-html="strTranslate(item.Content)"
              class="commentContent"
            ></div>

            <div class="ulList" v-for="item in item.children" :key="item.id">
              <div class="info">
                <span class="iconfont">&#xe604;</span>
                <span class="name">{{ item.RealName }}</span>
                <span class="time">{{ item.CreateTime }}</span>
              </div>
              <div
                v-html="strTranslate(item.Content)"
                class="commentContent"
              ></div>
              <div class="delete infoDelete" v-if="item.UserName === userName">
                <span @click="delComment(item)">
                  <span class="iconfont">&#xe618;</span>
                  <span class="name">删除</span>
                </span>
              </div>
            </div>
            <div v-if="item.show" class="reply">
              <span class="iconfont" @click="record(item, index)"
                >&#xe643;</span
              >
              <input v-model="item.comment" type="text" />
              <button @click="send(item)">发送</button>
            </div>
            <div v-if="item.UserName === userName" class="delete">
              <span @click="delComment(item)">
                <span class="iconfont">&#xe618;</span>
                <span class="name">删除</span>
              </span>
            </div>
          </div>
        </template>

        <span class="showReply" @click="showSend = !showSend">
          <span class="iconfont">&#xe608;</span>
          <span class="name">我要回答</span>
        </span>
      </div>
    </div>
    <div v-if="showSend" class="contentInput">
      <span class="iconfont" @click="record(false)">&#xe643;</span>
      <input type="text" v-model="sendMessage" />
      <button @click="send(false)">发送</button>
    </div>
  </div>
</template>
<script>
import homeHead from "./head.vue";
import { askDetail, currentComment, deleteComment } from "../../api/message.js";
import { Toast, MessageBox } from "mint-ui";
export default {
  name: "askOnline",
  created() {
    this.userName = JSON.parse(window.localStorage.userInfo).UserName;
    this.userId = JSON.parse(window.localStorage.userInfo).UserId;
  },
  mounted() {
    this.routeId = this.$route.query.queryId;
    this.routeParams = JSON.parse(this.$route.query.data);
    this.init();
  },
  data() {
    return {
      routeId: "",
      routeParams: {
        Title: null,
        Content: null,
        UserName: null,
        CreateTime: null,
        RealName: null,
      },
      commentData: [],
      sendMessage: "",
      showSend: false,
      userName: null,
      userId: null,
    };
  },
  methods: {
    init() {
      askDetail({
        qid: this.routeId,
      }).then((res) => {
        this.commentData = JSON.parse(res.data.data);
        this.commentData = this.commentData.map((i, index) => {
          i.show = false;
          i.comment = "";
          return i;
        });
        // 转意符换成普通字符
        function escape2Html(str) {
          var arrEntities = {
            lt: "<",
            gt: ">",
            nbsp: " ",
            amp: "&",
            quot: '"',
            p: "",
            br: ",",
          };
          return str.replace(
            /&(lt|gt|nbsp|amp|quot|p|br);/gi,
            function (all, t) {
              return arrEntities[t];
            }
          );
        }
        this.commentData.forEach((i) => {
          i.Content = escape2Html(i.Content);
        });
        this.routeParams.Content = escape2Html(this.routeParams.Content);
      });
    },
    strTranslate(str) {
      let str1 = str
        ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g, function (m) {
            return {
              "&lt;": "<",
              "&amp;": "&",
              "&quot;": '"',
              "&gt;": ">",
              "&#39;": "'",
              "&nbsp;": " ",
            }[m];
          })
        : "";
      return str1;
    },
    send(item) {
      let _this = this;
      if (!item) {
        if (!this.sendMessage.trim().length) {
          return Toast({
            message: "内容不能为空",
            position: "center",
            duration: 1000,
          });
        }
      } else {
        if (!item.comment.trim().length) {
          return Toast({
            message: "内容不能为空",
            position: "center",
            duration: 1000,
          });
        }
      }
      currentComment({
        questionId: this.routeParams.QuestionId,
        content: item ? item.comment : this.sendMessage,
        authorid: this.userId,
        parentid: item ? item.AnswerId : null,
      }).then((res) => {
        Toast({
          message: res.data.message,
          position: "center",
          duration: 1000,
        });
        if (!item) {
          _this.sendMessage = "";
        }
        _this.init();
      });
    },
    replyShow(item) {
      this.commentData = this.commentData.map((i) => {
        if (item.Id === i.Id) {
          i.show = !i.show;
        }
        return i;
      });
    },
    delComment(item) {
      MessageBox.confirm("请确认要删除当前评论么？").then((action) => {
        deleteComment({
          questionId: item.AnswerId,
          type: "1",
        }).then((res) => {
          Toast({
            message: res.data.message,
            position: "center",
            duration: 1000,
          });
          this.init();
        });
      });
    },
    record(i, index) {
      // 打印输出结果
      let _this = this;
      plus.speech.startRecognize(
        {
          engine: "baidu",
          punctuation: false,
          timeout: 10 * 1000,
        },
        function (s) {
          // 打印输出结果
          if (i) {
            _this.$set(_this.commentData, String(index), { ...i, comment: s });
          } else {
            _this.sendMessage = s;
          }
          // 关闭语音
          plus.speech.stopRecognize();
        }
      );
    },
  },
  components: {
    homeHead: homeHead,
  },
};
</script>
<style lang="scss" scoped>
.line {
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.viewport {
  padding: 50px 10px;
  box-sizing: border-box;
  .title {
    width: 100%;
    margin-top: 20px;
    .title1 {
      font-size: 20px;
      font-weight: bold;
    }
    .content {
      font-size: 15px;
      margin-top: 10px;
      color: #767b7d;
    }
    .infoP {
      margin-top: 30px;
      width: 100%;
      text-align: right;
      .info {
        color: #adadad;
        span {
          vertical-align: middle;
        }
        .iconfont {
          vertical-align: middle;
        }
        .name {
          vertical-align: middle;
        }
        .time {
          margin-left: 10px;
        }
      }
    }
  }
  .comment {
    width: 100%;
    margin-top: 30px;
    padding-bottom: 70px;
    .askCount {
      color: #248eec;
      vertical-align: bottom;
      font-size: 15px;
      .content {
        vertical-align: bottom;
        margin-left: 10px;
      }
    }
    .bestQuestion {
      margin-top: 30px;
      color: #efbb72;
      font-weight: bold;
      .iconfont {
        vertical-align: middle;
        font-size: 20px;
      }
      .name {
        font-size: 15px;
        vertical-align: middle;
      }
    }
    .askContent {
      margin-top: 10px;
      width: 100%;
      padding-bottom: 10px;
      min-height: 60px;
      border-bottom: 1px dashed #ccc;
      .info {
        color: #adadad;
        span {
          vertical-align: middle;
        }
        .iconfont {
          vertical-align: middle;
          margin-right: 5px;
        }
        .name {
          display: inline-block;
          width: 115px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          vertical-align: middle;
        }
        .time {
          margin-left: 10px;
        }
        .replyBut {
          float: right;
          .iconfont {
            vertical-align: middle;
          }
          .name {
            display: inline;
            vertical-align: middle;
          }
        }
      }
      .commentContent {
        margin-top: 15px;
        padding-left: 20px;
        box-sizing: border-box;
        font-size: 15px;
      }
      .ulList {
        margin: 10px 0;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
      }
      .infoDelete {
        box-sizing: border-box;
        padding-right: 30px;
        border-bottom: 1px dashed #ccc;
        padding-bottom: 10px;
      }
      .reply {
        margin-top: 10px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ddd;
        border-radius: 5px;
        position: relative;
        input {
          text-indent: 1em;
          width: 240px;
          margin-left: 40px;
          height: 20px;
          line-height: 20px;
          border-radius: 5px;
          border: 1px solid #ccc;
        }
        .iconfont {
          position: absolute;
          left: 10px;
          font-size: 20px;
          color: grey;
          cursor: pointer;
        }
        button {
          background: #0f88eb;
          outline-style: none;
          border: 0 none;
          color: #fff;
          height: 22px;
          line-height: 22px;
          padding: 0 10px;
          margin-top: 5px;
          margin-right: 5px;
          float: right;
          width: 15%;
        }
      }
      .delete {
        width: 100%;
        text-align: right;
        margin-top: 10px;
        color: #adadad;
        .iconfont {
          margin-right: 5px;
        }
      }
    }
    .askContent:first-child {
      margin-top: 0;
    }
    .askContent:last-child {
      border-bottom: 0 none;
    }
  }
}
.showReply {
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
}
.contentInput {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background: #fff;
  button {
    background: #0f88eb;
    outline-style: none;
    border: 0 none;
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
  }
  input {
    text-indent: 1em;
    width: calc(100vw - 130px);
    margin-left: 40px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  .iconfont {
    position: absolute;
    left: 10px;
    font-size: 20px;
    color: grey;
    cursor: pointer;
  }
}
</style>